<template>
  <div>
    <Row :gutter="20">
      <i-col
        :xs="12"
        :md="8"
        :lg="6"
        v-for="(infor, i) in mainCardData"
        :key="`infor-${i}`"
        style="height: 120px;padding-bottom: 10px;"
      >
        <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
          <count-to :end="infor.count" :symbol="infor.symbol" count-class="count-style"/>
          <p>{{ infor.title }}</p>
        </infor-card>
      </i-col>
    </Row>
    <Row style="margin-top: 20px;">
      <Table :columns="columns" :data="mainReportData.salereport"></Table>
    </Row>
    <Row style="margin-top: 20px;">
      <Card shadow>
        <project style="height:400px" :value="mainReportData.projectsreport"/>
      </Card>
    </Row>
    <Row
      :gutter="20"
      style="margin-top:30px;"
      v-for="(item,index) in Object.keys(mainReportData.reportArray)"
      :key="index"
    >
      <Card shadow>
        <through-number style="height:400px" :value="mainReportData.reportArray[item]"/>
      </Card>
    </Row>
  </div>
</template>

<script>
import InforCard from '_c/info-card'
import CountTo from '_c/count-to'
import { ChartPie, ChartBar } from '_c/charts'
import { mapActions, mapGetters } from 'vuex'
import Example from './example.vue'
import Project from './project.vue'
import ThroughNumber from './through-number'
export default {
  name: 'home',
  components: {
    InforCard,
    CountTo,
    ChartPie,
    ChartBar,
    Example,
    Project,
    ThroughNumber
  },
  data () {
    return {
      columns: [
        {
          title: '市场分区',
          align: 'center',
          key: 'uname',
          render: (h, params) => {
            return h('div', [
              h(
                'Tag',
                {
                  props: {
                    color: 'primary'
                  }
                },
                params.row.uname
              )
            ])
          }
        },
        {
          title: '月目标量 单位：户',
          align: 'center',
          key: 'target',
          render: (h, params) => {
            return h('div', [
              h(
                'Tag',
                {
                  props: {
                    color: 'green'
                  }
                },
                params.row.target + '户'
              )
            ])
          }
        },
        {
          title: '月完成量 单位：户',
          align: 'center',
          key: 'cps',
          render: (h, params) => {
            return h('div', [
              h(
                'Tag',
                {
                  props: {
                    color: 'cyan'
                  }
                },
                params.row.cps + '户'
              )
            ])
          }
        },
        {
          title: '月未完成 单位：户',
          align: 'center',
          key: 'gap',
          render: (h, params) => {
            return h('div', [
              h(
                'Tag',
                {
                  props: {
                    color: 'blue'
                  }
                },
                params.row.gap + '户'
              )
            ])
          }
        },
        {
          title: '当月剩余天数 单位：天',
          align: 'center',
          key: 'time',
          render: (h, params) => {
            return h('div', [
              h(
                'Tag',
                {
                  props: {
                    color: 'volcano'
                  }
                },
                params.row.time + '天'
              )
            ])
          }
        }
      ]
    }
  },
  computed: {
    ...mapGetters(['mainReportData', 'mainCardData'])
  },
  methods: {
    ...mapActions([
      'getProjects',
      'getRoleList',
      'getPidList',
      'getMainReportData'
    ])
  },
  created () {
    this.getProjects()
    this.getRoleList()
    this.getPidList()
    this.getMainReportData()
  },
  mounted () {
    console.log(this.mainReportData)
  }
}
</script>

<style lang="less">
.count-style {
  font-size: 50px;
}
</style>
